<template>
	<div class="css-text">
		<h2>定位类</h2>
		<div class="fo-Gray mt10">一些定位相关的css类封装</div>

		<h4 class="mt40">绝对/相对定位</h4>
		<codeBox :list='list1'></codeBox>

		<h4 class="mt40">其他对齐</h4>
		<codeBox :list='list2'></codeBox>
	</div>
</template>

<script>
	import codeBox from '@/views/components/codeBox.vue'
	export default {
		components: {
			codeBox
		},
		data() {
			return {
				list1: [{
						cssGroup: "position: relative;",
						class: "relative"
					},
					{
						cssGroup: `
						position: absolute;
						left: 50%;
						top: 50%;
						transform: translate3d(-50%, -50%, 0);
					`,
						class: "cen-cen"
					},
					{
						cssGroup: `
						position: absolute;
						left: 50%;
						transform: translate3d(-50%, 0, 0);
					`,
						class: "hor-cen"
					},
					{
						cssGroup: `
						position: absolute;
						top: 50%;
						transform: translate3d(0, -50%, 0);
					`,
						class: "ver-cen"
					},
					{
						cssGroup: `
						position: absolute;
						left: 0;
						top: 0;
					`,
						class: "lef-top"
					},
					{
						cssGroup: `
						position: absolute;
						left: 0;
						top: 50%;
						transform: translate3d(0, -50%, 0);
					`,
						class: "lef-cen"
					},
					{
						cssGroup: `
						  position: absolute;
						  left: 0;
						  bottom: 0;
					`,
						class: "lef-bot"
					},
					{
						cssGroup: `
						position: absolute;
						right: 0;
						top: 0;
					`,
						class: "rig-top"
					},
					{
						cssGroup: `
						position: absolute;
						right: 0;
						top: 50%;
						transform: translate3d(0, -50%, 0);
					`,
						class: "rig-cen"
					},
					{
						cssGroup: `
						position: absolute;
						right: 0;
						bottom: 0;
					`,
						class: "rig-bot"
					},
				],
				list2: [{
						cssGroup: "position: fixed !important;",
						class: "fiex"
					},
					{
						cssGroup: "position: sticky;",
						class: "sticky"
					},
				]
			}
		}
	}
</script>

<style lang="less" scoped>
	.codeBox {
		padding: 10px 20px;
		width: 1000px;
		max-height: 300px;
		overflow: scroll;
		border-radius: 10px;
		color: skyblue;
		font-size: 14px;
		background: #2B2B2B;

		&::-webkit-scrollbar {
			width: 0px;
		}

		&::-webkit-scrollbar-thumb {
			background: skyblue;
			border-radius: 20px;
		}
	}
</style>
